
<template>
    <div class="bgy-navmenu-div">
      <div class="title-log">
        <div class="imgbox"><img class="log" src="./img/log.png" alt=""></div>
        <div class="textbox">{{isCollapse === false ? '报关易' : ''}}</div>
      </div>
        <el-menu
        v-if="showNav"
        :collapse="isCollapse"
        :default-active="editableTabsValue"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :unique-opened="true"
        :router="true"
        :collapse-transition="true"
        background-color="#011e3b"
        text-color="rgb(255, 255, 255, 0.65)"
        active-text-color="#fff">
        <template v-for="(item, index) in NavMenuData">
            <!-- 叶子菜单 -->
            <el-submenu :index="toString(item.menuId)" :key="index" v-if="item.children">
                <template slot="title">
                  <i class="iconfont" :class="item.icon"></i>
                  <span>{{item.menuName}}</span>
                </template>
                <template v-for="(submenuItem, submenuIndex) in item.children">
                  <!-- 有叶子菜单 -->
                    <el-submenu :key="submenuIndex" :index="toString(submenuItem.menuId)" v-if="submenuItem.children">
                        <template slot="title">{{submenuItem.menuName}}</template>
                        <el-menu-item v-for="(threeMenuItem, threeMenuindex) in submenuItem.children" :key="threeMenuindex" :index="toString(threeMenuItem.menuId)">
                          {{threeMenuItem.menuName}}
                        </el-menu-item>
                    </el-submenu>
                    <!-- 无叶子菜单 -->
                    <el-menu-item :index="toString(submenuItem.menuId)" :key="submenuIndex" v-if="!submenuItem.children" @click="toPath(submenuItem)">
                        <i class="iconfont" :class="submenuItem.icon"></i>
                        <span slot="title">{{submenuItem.menuName}}</span>
                    </el-menu-item>
                </template>
            </el-submenu>
            <!-- 父级菜单 -->
            <el-menu-item :index="toString(item.menuId)" :key="index" v-if="!item.children" @click="toPath(item)">
                <i class="iconfont" :class="item.icon"></i>
                <span slot="title">{{item.menuName}}</span>
            </el-menu-item>
        </template>
    </el-menu>
    </div>
</template>

<script>
import menuData from './navmenu.json'
import { mapState,mapMutations } from 'vuex';
import { menuList, editMenu } from '@/axios/user/menu';

export default {
  name: 'navmenu',
  data () {
    return {
      NavMenuData: [],
      showNav: false
    }
  },
  components: {
  },
  created(){
    this.SAVE_MENUDATA(menuData)
  },
  mounted() {
      this.init()
  },
  watch: {
    '$store.state.menuData': {
      immediate: true,
      handler (v, o) {
        if (v) {
          this.showNav = false
          this.NavMenuData = JSON.parse(JSON.stringify(this.menuData))
          this.showNav = true
        }
      }
    }
  },
  computed:{
    ...mapState([
      'isCollapse',
      'editableTabsValue',
      'menuData'
    ])
  },
  methods:{
      ...mapMutations([
         'SAVE_ISCOLLAPSE',
         'SAVE_EDITABLETABS',
         'SAVE_MENUDATA'
       ]),
      /**
       * @method 初始化
       */
      init(){
        if (!this.$store.state.reloadFlag) {
            this.$store.state.reloadFlag = true
            this.$nextTick()
        }
      },
      handleOpen(key, keyPath) {
        //console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        //console.log(key, keyPath);
      },
      /**
      * @method 一级菜单跳转
      */
      toPath(item) {
        this.$router.push({
          path: item.path
        })
        this.SAVE_EDITABLETABS(item)
      },
      toString(id) {
        return id.toString()
      }
  }
};
</script>

<style lang="scss">
@import '../../style/mixin';
@import "./navmenu.scss";
</style>